<template>
  <div class="onlineOfflineIndicator">
    <Tooltip :content="onlineOfflineIconAndContent.content"
             :placement="`top`">
      <div><icon-svg class-name="iconClass"
                  :icon-name="onlineOfflineIconAndContent.icon" /></div>
    </Tooltip>
    <div>{{ value.name }}</div>
  </div>
</template>

<script>
import Tooltip from '@components/basic/Tooltip.vue'

export default {
  name: 'OnlineOfflineIndicator',
  components: { Tooltip },
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    value: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    getIconAndContent () {
      return value => value ? { icon: 'xianshang', content: '线上' } : { icon: 'xianxia', content: '线下' };
    },
    onlineOfflineIconAndContent () {
      return this.getIconAndContent(this.value?.type)
    }
  }
}
</script>

<style scoped>
.onlineOfflineIndicator {
  display: flex;
}
.iconClass {
  padding-right: 5px;
}
</style>